<template>
  <n-modal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 800px">
      <mac-header
        title="选择作品"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <div class="search">
          <n-form inline :model="tableInfo.queryForm" label-placement="left">
            <n-form-item label="标题">
              <n-input
                v-model:value="tableInfo.queryForm.name"
                placeholder="请输入标题"
                clearable
                style="width: 200px"
              />
            </n-form-item>
            <n-form-item label="分类">
              <n-select
                v-model:value="tableInfo.queryForm.type_id"
                :options="stateOptions.classify"
                label-field="name"
                placeholder="请选择分类"
                clearable
                value-field="id"
                style="width: 200px"
              />
            </n-form-item>
            <n-form-item>
              <n-button type="primary" @click="queryData">
                <template #icon>
                  <n-icon>
                    <i class="esayIcon esayIcon-sousuo"></i>
                  </n-icon>
                </template>
                <span>搜索</span>
              </n-button>
            </n-form-item>
          </n-form>
        </div>
        <n-data-table
          style="height: 500px"
          flex-height
          :scroll-x="1800"
          :columns="columns"
          :loading="tableInfo.listLoading"
          :data="tableInfo.tableData"
        />
        <div class="pagination mt20">
          <n-pagination
            v-model:page="tableInfo.queryForm.pageNo"
            :page-count="tableInfo.total"
            :page-sizes="tableInfo.pageSizes"
            show-quick-jumper
            show-size-picker
            @updatePage="pageChange"
            @updatePageSize="sizeChange"
          />
        </div>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import { reactive, ref, h, toRaw, provide } from 'vue'
import { useFullscreen } from '@vueuse/core'
import {
  NModal,
  NInput,
  NDataTable,
  NPagination,
  NTag,
  NButton,
  NForm,
  NFormItem,
  NIcon,
  NSelect
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { useApi } from '@/hooks/useApi'
import photoListApi from '@/service/api/photo/list'
import { photoListState } from '@/types/options'
import classifyApi from '@/service/api/photo/classify'
/**
 *  弹框
 * */
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const state = reactive({
  dialogFormVisible: false
})
const open = () => {
  tableInfo.queryForm.name = ''
  tableInfo.queryForm.type_id = null
  queryData()
  state.dialogFormVisible = true
}
const close = () => {
  state.dialogFormVisible = false
}
defineExpose({
  open
})

/**
 *  列表
 * */
const { pageChange, sizeChange, tableInfo, queryData } = useApi({
  initForm: {
    name: '',
    type_id: null
  },
  isRequest: false,
  getData: async (params: any) => {
    const res = await photoListApi.list(params)
    res.data.data.map((el: any) => {
      el.key = el.id
      return el
    })
    return res
  }
})
const columns: DataTableColumns<any> = [
  {
    title: '标题',
    width: 200,
    key: 'name'
  },
  {
    title: '是否私密',
    key: 'private',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: row.private === 0 ? 'success' : 'error'
        },
        { default: () => (row.private === 0 ? '公开' : '私密') }
      )
    }
  },
  {
    title: '类型',
    key: 'tabInfo',
    width: 200,
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.tabName }
      )
    }
  },
  {
    title: '作者',
    key: 'author_id',
    width: 150,
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.author_name }
      )
    }
  },
  {
    title: '国家',
    key: 'country',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.country }
      )
    }
  },
  {
    title: '机构',
    key: 'institution',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.institution_name }
      )
    }
  },
  {
    title: '老机构',
    key: 'institution',
    align: 'center',
    render(row: any) {
      return h(
        NTag,
        {
          type: 'info'
        },
        { default: () => row.institution }
      )
    }
  },
  {
    title: '价格',
    key: 'price'
  },
  {
    title: '浏览量',
    key: 'view'
  },
  {
    title: '权重',
    key: 'sort'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    fixed: 'right',
    width: 100,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: () => handChoose(row)
          },
          { default: () => '选择' }
        )
      ])
    }
  }
]
const emit = defineEmits(['change'])
const handChoose = (row: any) => {
  emit('change', toRaw(row))
  close()
}

const stateOptions: photoListState = reactive({
  classify: []
})
provide('stateOptions', stateOptions)
const getOptions = async () => {
  const { data } = await classifyApi.allList()
  stateOptions.classify = data
}

getOptions()
</script>
